<template>
  <div class="TalentReview content-container">
    <div class="tittle">审核管理-人才信息审核</div>
    <div class="Ltop">
      <button
        v-for="(item,index) in btnlist"
        :key="index"
        @click="doClick(index)"
        :class="{active:item.isActive}"
      >{{item.name}}</button>
<!--      <div style="border: 1px solid red">-->
<!--        <el-input v-model="search" placeholder="人才名称" style="width: 250px;margin-right: 20px"></el-input>-->
<!--        <button class="active search" style="">查询</button>-->
<!--      </div>-->
    </div>
      <div class="Lcontent op" v-loading="loading">
        <el-table
          :header-cell-style="{background:'rgba(247,249,252,.5)',color:'#1F2E4D',}"
          width="100%"  ref="table" height="100%"
          border
          :data="table.data">
          <el-table-column align="center" prop="name" label="人才姓名" ></el-table-column>
          <el-table-column align="center" prop="content" label="执业类型" >
            <template slot-scope="scope">
              <el-popover
                      placement="top-start"
                      width="200"
                      trigger="hover">
                  <div v-html="scope.row.content"></div>
                  <div slot="reference" v-html="scope.row.short"></div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="jobState" label="求职状态" ></el-table-column>
          <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
          <el-table-column align="center" prop="rdtime" label="发布时间"></el-table-column>
          <el-table-column align="center" prop="ldate" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleClick(scope.row)">{{msg}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fen">
        <el-pagination
                style="margin-right: 40px"
          background
          @current-change="pageChange"
          :current-page.sync="query.currPageNo"
          :page-size="query.pageSize"
          layout="total,prev, pager, next"
          :total="table.total"></el-pagination>
      </div>
  </div>
</template>

<script>
export default {
  name: "TalentReview",
  data() {
    return {
      tableHeight: window.innerHeight * 0.5,
      search:"",
      loading:false,
      btnlist: [
        { name: "待审核", isActive: true },
        { name: "审核通过", isActive: false },
        { name: "异常", isActive: false }
      ],
      msg: "审核", //审核通过  msg=修改
      query:{
        state:0,
        currPageNo: 1,
        pageSize: 30,
      },
      table:{
        data:[],
        total:1,
      },
      fsnumShow: false
    };
  },
  methods: {
    handleChange(value) {
      console.log("handle",value);
    },
    pageChange(){
      this._getData()
    },
    _getData(){
      this.loading=true
      this.lAxios({
        method: "post",
        url: "/platform/getState.do",
        params: {
          //传参
          ...this.query
        }
      }).then(res => {
          //成功
          if (res.data.status == 0) {
            this.table.data = res.data.data.list;
            for(let i=0;i<this.table.data.length;i++){
              if(this.table.data[i].content!=null&&this.table.data[i].content.indexOf(',')!=-1){
                let arr = this.table.data[i].content.split(',');
                let temp = ""
                for(let item of arr){
                  temp += item + '<br>'
                }
                temp = temp.substring(0,temp.lastIndexOf('<br>'));
                console.log('temp',temp)
                this.table.data[i].content = temp;
                this.table.data[i].short = arr[0]+"...";
              }else{
                this.table.data[i].short = this.table.data[i].content;
              }
            }
            console.log("table",this.table.data)
            this.table.total = res.data.data.total;
            //失败
          } else {
            this.$message(res.data.msg);
          }
          //异常
        })
        .finally(() => {
          this.loading=false
        })
    },
    doClick(obj) {
      //console.log(obj);
      this.query.state = obj
      this.btnlist.forEach(item => {
        item.isActive = false;
      });
      this.btnlist[obj].isActive = true;
      //当点击 【审核通过】 和 【异常】 时，msg 改为 修改
      if (obj != 0) this.msg = "修改";
      else this.msg = "审核";
      this._getData()
    },
    handleClick(row) {
      console.log(row.id);
      //1.存放人才对象
      localStorage.setItem("talent_rowInfo", JSON.stringify(row));
      //2.存放按钮信息
      this.btnlist.forEach(itme => {
        if (itme.isActive == true) {
          localStorage.setItem("cache_t", itme.name);
        }
      });
      //3.跳转
      this.$router.push({path:"/audit",query:{index:this.query.state+""}});
    }
  },
  mounted(){
    // this.$nextTick(function () {
    //   let self = this;
    //   window.onresize = function () {
    //     self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 38
    //     _d.talh = self.tableHeight;
    //     console.log("databaseT", self.tableHeight)
    //   }
    // })
  },
  activated() {
    var name = this.$route.query.name;
    if(name==undefined){
       name =  localStorage.getItem("cache_t");
       if(name==undefined){
         name =  "待审核";
       }
    }
    if (name == "待审核") {
      this.doClick(0);
    } else if (name == "审核通过") {
      this.doClick(1);
    } else if (name == "异常") {
      this.doClick(2);
    }
  }
};
</script>

<style scoped>
  .op{
    height:calc(100vh - 300px);
    overflow: auto;
  }
  .el-table .cell.el-tooltip {
           white-space: pre-wrap;
       }
.TalentReview {
  height: 130%;
  background-color: #f7f9fc;
  padding-left: 20px;
  /*height:600px ;*/
  /*overflow-y: hidden;*/
}
.tittle {
  height: 54px;
  line-height: 54px;
  color: #3d4966;
  font-size: 14px;
}
.Ltop {
  padding: 40px 0 20px 40px;
  background-color: #fff;
}
.Ltop > button {
  background: #f7f9fc;
  border-radius: 5px;
  border: 1px solid rgba(211, 219, 235, 1);
  font-size: 14px;
  margin-right: 25px;
}
.Ltop > button {
  width: 125px;
  height: 50px;
}
.Ltop > button.search{
  width: 110px;
  height: 40px;
}
.Ltop span{
    display: inline-block;
    color: #FF7300;
    font-size: 12px;
    vertical-align:bottom;

}
  .Ltop .active {
  background-color: #3377ff;
  color: #fff;
}

.Lcontent {
  background-color: #fff;
  padding: 0 40px;
  /*height:276px ;*/
  /*background-color: #f2f2f2;*/
  /* border: 1px solid #797979; */
}
/*-------------------tabel-------------------------*/
.Ltabel {
    margin-bottom: 40px;
}
.fen{
    background-color: #fff;
}
.el-pagination{

    float: right;
}
.btn {
 display: inline-block;
 height: 40px;
 width: 140px;
 box-sizing: border-box;
  color: #3377FF;
  border:1px solid #3377FF;
  border-radius: 5px;
  padding: 5px 10px;
 margin: 0px 60px !important;
}

</style>
